<template>
  <!-- 输出参数 -->
  <div class="step-servicesccs">
    <el-row type="flex" align="middle" justify="space-between">
      <el-col :span="5" v-if="!isView">
        <add-button @click="addParams" />
        <add-button text="批量新增" @click="batcAaddParams" />
      </el-col>
      <el-col
        :span="12"
        v-if="zhpzData.isParamOutSerialize && serverReleaseType === '3'"
        >
        <!-- v-if="zhpzData.isParamSerialize && serverReleaseType === '3'" -->
        <span class="title">序列化类型：</span>
        <el-radio label="1" v-model="zhpzData.paramOutSerializeType">XML</el-radio>
        <!-- <el-radio label="1" v-model="zhpzData.paramSerializeType">XML</el-radio> -->
        <span class="title">序列化出参名称：</span>
        <el-input
          v-model="zhpzData.paramOutSerializeName"
          style="width: 150px"
          size="mini"
          :disabled="isView"
        />
      </el-col>
<!--      <el-col :span="4">
        <span>支持参数属性：</span>
        <el-switch
          v-if="!isView"
          v-model="zhpzData.outparamWithAttr"
          active-color="#13ce66"
        >
        </el-switch>
        <yes-no-tag
          v-else
          yesText="是"
          noText="否"
          :value="zhpzData.outparamWithAttr ? 'Y' : 'N'"
        />
      </el-col>-->
      <el-col :span="3" v-if="serverReleaseType === '3'">
        <div class="flex-end">
<!--          <el-checkbox v-model="zhpzData.isParamOutChange" :disabled="isView">-->
<!--            <el-button-->
<!--              type="text"-->
<!--              @click="handleChange"-->
<!--              :disabled="!zhpzData.isParamOutChange"-->
<!--              >结构转换</el-button-->
<!--            >-->
<!--          </el-checkbox>-->

          <el-checkbox v-model="zhpzData.isParamOutChange" :disabled="isView">
            <el-button type="text">结构转换</el-button>
          </el-checkbox>
          <el-button style="margin-left: 5px;cursor: pointer"
                     type="text" v-if="zhpzData.isParamOutChange"
                     @click="handleChange">配置
          </el-button>

        </div>
      </el-col>
    </el-row>
    <el-table
      style="margin: 10px 0"
      row-key="nodeId"
      default-expand-all
      :data="outputData"
    >
      <el-table-column
        label="参数名"
        prop="nodeName"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          <div style="display: inline-block">
            <span>{{ scope.row.nodeName }}</span>
            <el-tag size="mini" v-if="scope.row.isAttr === 'Y'">属性</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="参数描述"
        prop="nodeLabel"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column label="参数类型" prop="nodeType" width="140">
        <template #default="scope">
          <span>{{ selectDictLabel(keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否必须"
        prop="nodeNeededable"
        width="80"
        align="center"
      >
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeNeededable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" v-if="!isView">
        <template #default="scope">
          <text-add-button
            v-if="zhpzData.outparamWithAttr && scope.row.isAttr !== 'Y'"
            text="属性"
            @click="addAttr(scope.row)"
          />
          <text-add-button
            v-if="scope.row.nodeType == 'object'"
            text="子节点"
            @click="addChildParams(scope.row)"
          />
          <text-edit-button @click="handleEdit(scope.row)" />
          <text-delete-button
            @click="handleDelete(scope.row.nodeId)"
            :title="'是否确认删除' + scope.row.nodeName + '?'"
          />
        </template>
      </el-table-column>
    </el-table>
    <add-params
      ref="addParamsRef"
      :title="title"
      modelType="sccs"
      v-model:visible="visible"
      :nodeTypeList="initData.isAttr ? attrNodeTypeList : nodeTypeList"
      :rules="rules"
      :initData="initData"
      @onOk="onOk"
    />
    <batch-add-params
      title="批量新增输出参数"
      v-model:batchVisible="batchVisible"
      @onOk="onBatchOk"
    />
    <el-dialog
      v-el-drag-dialog
      title="输出参数结构转换"
      :close-on-click-modal="false"
      v-model="changeVisible"
      width="1200px"
      append-to-body
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card shadow="never" :body-style="{ padding: '0' }">
            <div slot="header">
<!--              <span>API输出参数</span>-->
              <el-tooltip class="item" effect="dark" content="API输出参数来源于【API管理】页面的【输出参数】tab页" placement="right">
                  <span>
                   <span >
                     API输出参数
                   </span>
                    <i style="margin-left: 3px" class="el-icon-question"></i>
                  </span>
              </el-tooltip>
            </div>
            <el-table row-key="nodeId" default-expand-all :data="apiOutTable">
              <el-table-column label="参数名" prop="nodeName" />
              <el-table-column label="参数描述" prop="nodeLabel" />
              <el-table-column label="参数类型" prop="nodeType">
                <template #default="scope">
                  <span>{{
                    selectDictLabel(keyTypeList, scope.row.nodeType)
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" :body-style="{ padding: '0' }">
            <div slot="header">
<!--              <span>能力输出参数</span>-->
              <el-tooltip class="item" effect="dark" content="能力输出参数来源于【能力管理】页面的【输出参数】tab页" placement="right">
                  <span>
                   <span >
                     能力输出参数
                   </span>
                    <i style="margin-left: 3px" class="el-icon-question"></i>
                  </span>
              </el-tooltip>
            </div>
            <el-table
              row-key="serviceNodeId"
              default-expand-all
              :data="serviceOutChangeTable"
            >
              <el-table-column label="参数名" prop="nodeName" />
              <el-table-column label="参数描述" prop="nodeLabel" />
              <el-table-column label="JsonPath">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.jsonPath"
                    size="mini"
                    :disabled="isView"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <dialog-footer
        slot="footer"
        okText="保存"
        :showOk="!isView"
        @ok="onChangeOk"
        @cancel="changeVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
// import { mapActions, mapState } from "vuex";
import AddParams from "./add-params.vue";
import BatchAddParams from "./batch-add-params.vue";


import {serviceStore} from '@slc/store/service';
import {flowServiceStore} from '@slc/store/flowService';
import {mapActions, mapState} from 'pinia';


import { outSearchTree } from "@slc/api/slc/api";
import {
  InParamOutInsert,
  outUpdateById,
  selectparentDetail,
  outDeleteByIds,
  saveChangeParamOut,
  searchChangeParamOut,
  batchOutParamInsert
} from "@slc/api/slc/inventory";
export default {
  name: "step-sccs",
  components: {
    AddParams,
    BatchAddParams,
  },
  data() {
    return {
      title: "",
      visible: false,
      batchVisible: false,
      nodeTypeList: [
        { dictValue: "string", dictLabel: "字符串 (String)" },
        { dictValue: "long", dictLabel: "整数 (Long)" },
        { dictValue: "decimal", dictLabel: "小数 (Decimal)" },
        { dictValue: "object", dictLabel: "JSON对象 (Object)" },
        { dictValue: "array", dictLabel: "JSON数组 (Array)" },
      ],
      attrNodeTypeList: [
        { dictValue: "string", dictLabel: "字符串 (String)" },
        { dictValue: "long", dictLabel: "整数 (Long)" },
        { dictValue: "decimal", dictLabel: "小数 (Decimal)" },
      ],
      rules: {
        nodeType: [
          { required: true, message: "参数类型不可以为空", trigger: "blur" },
        ],
        elementType: [
          { required: true, message: "元素类型不可以为空", trigger: "blur" },
        ],
        nodeName: [
          { required: true, message: "参数名不可以为空", trigger: "blur" },
        ],
        nodeLabel: [
          { required: true, message: "参数描述不可以为空", trigger: "blur" },
        ],
      },
      initData: {},
      changeVisible: false,
      apiOutTable: [],
      serviceOutChangeTable: [],
    };
  },
  watch: {
    'zhpzData.isParamOutChange'(val) {
      if (val) {
        this.handleChange();
      }
    },
      zhpzData: {
        handler(val) {
          this.setZhpzInfo(val);
        },
        deep: true,
      },
  },
  computed: {
    ...mapState(serviceStore, [
      "serverReleaseType",
      "serviceVerId",
      "outputData",
      "keyTypeList",
      "chooseApiInfo",
      "dialogStatus",
      "dialogVersionStatus",
        "zhpzInfo"
    ]),
    zhpzData: {
      get() {
        return this.zhpzInfo;
      }
      // set(val) {
      //   this.setZhpzInfo(val);
      // },
    },
    // sccsData: {
    //   get() {
    //     return this.$store.state.service.sccsInfo;
    //   },
    //   set(val) {
    //     this.setSccsInfo(val);
    //   },
    // },
    isView() {
      return (
        this.dialogStatus === "view" || this.dialogVersionStatus === "view"
      );
    },
  },
  mounted() {
    this.getOutputData({ serviceVerId: this.serviceVerId });
  },
  activated() {
    this.getOutputData({ serviceVerId: this.serviceVerId });
  },
  methods: {
    ...mapActions(serviceStore, ["setZhpzInfo","getOutputData"]),
    batcAaddParams() {
      this.batchVisible = true;
    },
    addParams() {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数";
      this.type = "add";
      this.initData = {
        parentNode: "根节点",
        nodeParentId: 0,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: false,
      };
      this.visible = true;
    },
    addAttr(row) {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数-属性";
      this.type = "add";
      this.initData = {
        nodeParentId: row.nodeId,
        parentNode: `${row.nodeName}(${row.nodeLabel})`,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: true,
      };
      this.visible = true;
    },
    addChildParams(row) {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数-子节点";
      this.type = "add";
      this.initData = {
        nodeParentId: row.nodeId,
        parentNode: `${row.nodeName}(${row.nodeLabel})`,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: false,
      };
      this.visible = true;
    },
    async handleEdit(row) {
      const res = await selectparentDetail(row.nodeParentId);
      let parentNode;
      if (res.data) {
        parentNode = `${res.data.nodeName}(${res.data.nodeLabel})`;
      } else {
        parentNode = "根节点";
      }
      this.title = "修改输入参数";
      this.type = "edit";
      this.initData = {
        nodeParentId: row.nodeParentId ? row.nodeParentId : 0,
        parentNode: parentNode,
        nodeId: row.nodeId,
        nodeType: row.nodeType,
        elementType: row.elementType,
        nodeName: row.nodeName,
        nodeLabel: row.nodeLabel,
        nodeNeededable: row.nodeNeededable === "Y",
        isAttr: row.isAttr === "Y",
      };
      this.visible = true;
    },
    async handleDelete(nodeId) {
      const res = await outDeleteByIds(nodeId);
      if (res.code === "200") {
        this.msgSuccess("删除成功");
        this.getOutputData({ serviceVerId: this.serviceVerId });
      }
    },
    async onOk(formData) {
      const params = {
        serviceVerId: this.serviceVerId,
        ...formData,
        isAttr: formData.isAttr ? "Y" : "N",
        nodeNeededable: formData.nodeNeededable ? "Y" : "N",
        elementType: formData.nodeType === "array" ? formData.elementType : "",
      };
      let fn;
      if (this.type === "add") {
        fn = InParamOutInsert;
      } else {
        fn = outUpdateById;
      }
      const res = await fn(params);
      if (res.code === "200") {
        this.visible = false;
        this.getOutputData({ serviceVerId: this.serviceVerId });
      }
    },
    async onBatchOk(val) {
      const params = {
        serviceVerId: this.serviceVerId,
        ...val
      }
      const res = await batchOutParamInsert(params)
      if (res.code === '200') {
        this.batchVisible = false
        this.getOutputData({ serviceVerId: this.serviceVerId });
      }
    },
    async handleChange() {
      const { apiId, apiVerId } = this.chooseApiInfo;
      const apiRes = await outSearchTree({ apiId: apiId, apiVerId: apiVerId });
      const res = await searchChangeParamOut({
        apiVerId,
        serviceVerId: this.serviceVerId,
      });
      if (res.code === "200") {
        this.apiOutTable = apiRes.data;
        this.serviceOutChangeTable = res.data;
        this.changeVisible = true;
      }
    },
    async onChangeOk() {
      const res = await saveChangeParamOut({
        apiVerId: this.chooseApiInfo.apiVerId,
        serviceVerId: this.serviceVerId,
        paramOut: this.serviceOutChangeTable,
      });
      if (res.code === "200") {
        this.$message.success("结构转换保存成功。");
        this.changeVisible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.step-servicesccs {
  width: 100%;
  padding: 16px;
  .flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;

  }
}
</style>
